<script lang="ts">
	import Tab, { Icon, Label } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import { goto } from '$utils/intercept';
	import { page } from '$app/stores';
	import { useNavBarStore } from '@/store/modules/navBar';
	import { shallowClone } from '$utils/clone';
	import { useI18n } from '@/i18n';
	import {
		BAR_SEARCH_LABEL_MAPPER,
		BAR_TEXT_MAPPER,
		infoRoutes,
		mainRoutes,
		NAV_BAR_MAPPER,
		tabs,
		thirdRoutes,
		type TabItemType
	} from '@/constant/route-config-state';

	// 获取匹配的 tab
	const get_mapped_tab = (pathname: string = $page.url.pathname): TabItemType => {
		const tab = tabs.find((tab) => tab.path === pathname);
		if (tab) return tab;
		const position = pathname.replace(/^\//g, '').split('/')[0];
		if (thirdRoutes.includes(position)) return tabs[3];
		if (infoRoutes.includes(position)) return tabs[1];
		return tabs[1];
	};

	const navStore = useNavBarStore();
	let isHandleCall = false;
	let currentPath = '';
	let active: TabItemType = get_mapped_tab();

	const get_position = () => {
		const pathname: string = $page.url.pathname;
		const route: string = pathname.replace(/^\//g, '').split('/')[0];
		return route;
	};

	function choose_current_banner(route: string = get_position()) {
		navStore.toggleContent(shallowClone(NAV_BAR_MAPPER[route] as NavProps));
	}

	const jump_tab_path = async (item = active) => {
		if (!isHandleCall) await goto(item.path);
		else isHandleCall = false;
	};

	function resetBannerText(route: string = get_position()) {
		BAR_TEXT_MAPPER[route] && navStore.toggleBannerText(BAR_TEXT_MAPPER[route]);
	}

	function resetSearchKey(route: string = get_position()) {
		BAR_SEARCH_LABEL_MAPPER[route] && navStore.toggleSearchLabel(BAR_SEARCH_LABEL_MAPPER[route]);
	}

	async function handleTabChange(e: CustomEvent<any>) {
		e.preventDefault();
		await jump_tab_path();
	}

	$: {
		// const res = get_mapped_tab();
		// if (res.path !== active.path) {
		// 	active = get_mapped_tab();
		// }
		if (currentPath !== $page.url.pathname) {
			currentPath = $page.url.pathname;
			const position = currentPath.replace(/^\//g, '').split('/')[0];

			// if (!mainRoutes.includes(position)) {
			const curTab = get_mapped_tab();
			if (active.path !== curTab.path) {
				active = curTab;
				console.log('position', position);
			}
			// }

			choose_current_banner(position);
			resetBannerText(position);
			resetSearchKey(position);
		}

		// handle_active_adapter(currentRoute);
		// choose_current_banner();
	}
	// onMount(route_change_call);

	// 获取i18n
	const { t } = useI18n();
</script>

<div class="sticky top-48px z-999 bg-white">
	<!-- 
		class="bg-gray-2 flex-cc"
		class="w-1320px min-w-350px max-w-100%" 
		
		on:SMUITabBar:activated={handleTabChange}
	-->
	<TabBar
		{tabs}
		let:tab
		bind:active
		class="bg-gray-2"
		on:click={handleTabChange}
		style="--mdc-typography-button-font-size: 1rem"
	>
		<Tab {tab}>
			<Icon class="material-icons">{tab.icon}</Icon>
			<Label>{$t(tab.label)}</Label>
		</Tab>
	</TabBar>
</div>
